This package provides the Fluent UI System Icons as optimized plain svg assets.
Installationnpm install @fluentui/svg-iconsUsageThe library offers icons in SVG format; the icon names are structured as:
[name]_[size]_[style]
name - Name of the icon from assets that is all lowercased and underscore separated.size - Size of the icon that is one of 16/20/24/28/48. Note that some icons do not have all sizes available yet. Our designers are working to add missing ones to complete the collection.style - Style of the icon that is one of regular, filled. See the section below for details.Icon stylesThe library offers icons in two styles, regular and filled
regularfilled
ImplementationA common use case is to use svg-inline-loader in your Webpack config.
npm install svg-inline-loader --save-devwebpack.js:
module.exports = {resolve: {extensions: [".svg"],},module: {rules: [{test: /\.svg$/,use: [{loader: "svg-inline-loader",options: {removeSVGTagAttrs: false,},},],}]}};Then reference an icon on a page.
Using template literal:
import AddIcon from "@fluentui/svg-icons/icons/add_20_filled.svg";`${AddIcon}`Or require:
var icon = require('@fluentui/svg-icons/icons/add_20_filled.svg');